<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="../vue.js"></script>
	<link rel="stylesheet" href="../animate.css">
	<style>
		@keyframes bounce-in {
			0% { 
				transform: scale(0);
			}
			50% {
				transform: scale(1.5);
			}
			100% {
				transform: scale(1);
			}
		}
		/*.fade-enter-active {
			transform-origin: left center;
			-webkit-animation: bounce-in 2s;
			animation: bounce-in 2s;
		}
		.fade-leave-active {
			transform-origin: left center;
			-webkit-animation: bounce-in 2s;
			animation: bounce-in 2s reverse;
		}*/
		/*.enter {
			transform-origin: left center;
			-webkit-animation: bounce-in 2s;
			animation: bounce-in 2s;
		}
		.leave {
			transform-origin: left center;
			-webkit-animation: bounce-in 2s;
			animation: bounce-in 2s reverse;
		}*/
	</style>
</head>
<body>

	<div id="app">
		<transition name="fade" 
					enter-active-class="animated bounceInDown" 
					leave-active-class="animated bounceOutDown">
			<div v-if="show">bounce动画</div>
		</transition>
		<br>
		<button @click="handleClick">过度</button>
	</div>

	<script>

		var vm = new Vue({
			el: '#app',
			data: {
				show: true
			},
			methods: {
				handleClick: function () {
					this.show = !this.show;
				}
			}
		});

	</script>
</body>
</html>